<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>移动小球</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="应用">
        <div class="容器" @mousemove.stop="移动">
            <div class="小球" :style="{left: 横偏移 + 'px', top: 纵偏移 + 'px'}"></div>
        </div>
    </div>
    <style scoped="">
        body {
            margin: 0;
            padding: 0;
        }
        .容器 {
            margin: 0;
            padding: 0;
            position: absolute;
            width: 440px;
            height: 440px;
            background-color: blanchedalmond;
            display: inline;
        }
        .小球 {
            position: absolute;
            width: 60px;
            height: 60px;
            left: 100px;
            top: 100px;
            background-color: red;
            border-radius: 30px;
            z-index: 100;
        }
    </style>
</body>
<script>
    const 应用 = {
        data() {
            return {
                横偏移: 0,
                纵偏移: 0,
            }
        },
        methods: {
            移动(事件) {
                if(事件.clientX + 30 > 440) {
                    this.横偏移 = 440 - 60
                } else if (事件.clientX - 30 < 0) {
                    this.横偏移 = 0
                } else {
                    this.横偏移 = 事件.clientX - 30
                }
                if(事件.clientY + 30 > 440) {
                    this.纵偏移 = 440 - 60
                } else if (事件.clientY - 30 < 0) {
                    this.纵偏移 = 0
                } else {
                    this.纵偏移 = 事件.clientY - 30
                }
            }
        }
    }
    Vue.createApp(应用).mount('#应用')
</script>
</html>